// 定义变量
$spacing-unit: 24rpx;
$spacing-unit-large: 32rpx;
$safe-area-inset: calc(24rpx + constant(safe-area-inset-bottom));
$safe-area-inset-env: calc(24rpx + env(safe-area-inset-bottom));
$primary-color: #fff;
$text-colors: (
  "0": #000,
  "1": #111,
  "2": #222,
  "3": #333,
  "6": #666,
  "9": #999,
  "90": #909090,
  "f": #fff
);

// 混合宏
@mixin flex-layout($direction: row, $justify: center, $align: center, $wrap: wrap) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
  @if $wrap {
    flex-wrap: $wrap;
  }
}

@mixin spacing-generator($type, $directions) {
  @each $dir, $props in $directions {
    @each $size in 10, 12, 20, 24, 32, 40, 50, 60 {
      .x#{$type}#{$dir}#{$size} {
        @each $prop in $props {
          #{$prop}: #{$size}rpx;
        }
      }
    }
  }
}

// 基础布局
.xbottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: $spacing-unit;
  padding-bottom: $safe-area-inset;
  padding-bottom: $safe-area-inset-env;
  z-index: 50;
  background-color: $primary-color;

  &block {
    padding-bottom: $safe-area-inset;
    padding-bottom: $safe-area-inset-env;
  }
}

.xmian {
  background-color: $primary-color;
  width: 100vw;
  height: 95vh;
}

// Flex布局
$xflex-variants: (
  "x": row,
  "y": column
);

@each $prefix, $direction in $xflex-variants {
  .xflex-#{$prefix} {
    @include flex-layout($direction);
    
    &-center {
      @include flex-layout($direction, center, center);
    }
    
    &-between {
      @include flex-layout($direction, space-between, center, true);
    }
    
    &-around {
      @include flex-layout($direction, space-around, center, true);
    }
  }
}

// 边距生成
$spacing-types: (
  "m": margin,
  "p": padding
);

$spacing-directions: (
  "t": (top),
  "r": (right),
  "b": (bottom),
  "l": (left),
  "": (top right bottom left)
);

$spacing-base: 4px;
$spacing-steps: 15; // 4px * 15 = 60px
$position-props: (top, bottom, left, right);

@mixin generate-spacing($prefix, $property) {
  @for $i from 0 through $spacing-steps {
    $value: $i * $spacing-base;
    
    .#{$prefix}-#{$i} {
      #{$property}: $value;
    }
    
    @each $dir in $position-props {
      .#{$prefix}#{str-slice($dir, 1, 1)}-#{$i} {
        #{$property}-#{$dir}: $value;
      }
    }
  }
}


@include generate-spacing('xm', margin);
@include generate-spacing('xp', padding);

$spacing-ranges: '24-32', '20-25', '32-24', '24', '32';
@each $type in ('m', 'p') {
  $prop: if($type == 'm', margin, padding);

  @each $range in $spacing-ranges {
    // 分割字符串获取数值
    $values: str-split($range, '-');
    
    // 生成实际尺寸值
    $size-list: ();
    @each $num in $values {
      $size-list: append($size-list, #{$num}rpx);
    }

    // 生成类名和样式
    .x#{$type}#{$range} {
      #{$prop}: $size-list;
    }
  }
}

// 字符串分割函数（Sass需要自定义split函数）
@function str-split($string, $separator) {
  $split-arr: ();
  $index : str-index($string, $separator);
  
  @while $index != null {
    $item: str-slice($string, 1, $index - 1);
    $split-arr: append($split-arr, $item);
    $string: str-slice($string, $index + 1);
    $index : str-index($string, $separator);
  }
  
  $split-arr: append($split-arr, $string);
  @return $split-arr;
}

// 文本相关
@each $name, $color in $text-colors {
  .xc#{$name} {
    color: $color;
  }
}

// 字体大小
@for $i from 24 through 36 {
 .xfz#{$i} {
   font-size: #{$i}rpx;
 }
}

// 其他工具类
.xbs { box-sizing: border-box; }
.xbb8D { border-bottom: 1rpx solid #D8D8D8; }
.xtext-between {
  display: inline-block;
  text-align: justify;
  text-justify: distribute-all-lines;
  text-align-last: justify;
}

// 按钮重置
.xbutton {
  &, &:focus, &:active, &.active, &.focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
    background: transparent !important;
  }
  
  &::after {
    border: none;
  }
}

// 宽度/高度
@for $i from 1 through 10 {
  $width: $i * 10;
  .w#{$width} { width: $width * 1%; }
  .h#{$width} { height: $width * 1%; }
}

// 溢出省略
@for $i from 1 through 3 {
  .clamp#{$i} {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
  }
}